<template>
  <div class="padding-15">
    <el-row>
      <el-col class="top-search">
        <el-input
          v-model="listQuery.adId"
          :value="listQuery.adId"
          :placeholder="$t('please_enter_ad_id')"
          clearable
          class="w-240"
          @input="value => (listQuery.adId = value.replace(/[^\d]/g, ''))"
        />
        <el-input
          v-model.trim="listQuery.title"
          :placeholder="$t('please_enter_the_ad_title')"
          clearable
          class="w-240"
        />

        <el-select v-model="listQuery.lang" class="w-180">
          <el-option :value="null" :label="$t('all_languages')" />
          <el-option :label="$t('zh_hans')" value="zh-Hans" />
          <el-option :label="$t('english')" value="en-US" />
          <el-option :label="$t('khmer')" value="km-KH" />
        </el-select>
        <el-select v-model="listQuery.status" class="w-180">
          <el-option :value="null" :label="$t('all_states')" />
          <el-option :value="3" :label="$t('online')" />
          <el-option :value="2" :label="$t('deactivated')" />
          <el-option :value="1" :label="$t('deleted')" />
        </el-select>

        <el-input
          v-model.trim="listQuery.updateByName"
          :placeholder="$t('please_enter_the_last_operator')"
          clearable
          class="w-240"
        />
        <el-button type="primary" @click="search()">{{
          $t('search')
        }}</el-button>
      </el-col>
    </el-row>

    <el-row class="p-t-15">
      <el-col>
        <el-menu
          :default-active="listQuery.tabId"
          class="el-menu-demo"
          mode="horizontal"
          @select="switchTab"
        >
          <el-menu-item index="1">{{ $t('splash_screen') }}</el-menu-item>
          <el-menu-item index="2">{{ $t('popups') }}</el-menu-item>
          <el-menu-item index="3">banner</el-menu-item>
          <el-menu-item index="4">{{ $t('promotion') }}</el-menu-item>
          <el-menu-item index="5">{{ $t('popular_events') }}</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <el-row>
      <el-col class="p-t-15">
        <el-table
          v-loading="listLoading"
          :data="listData"
          border
          fit
          highlight-current-row
        >
          <el-table-column width="60" :label="$t('serial_number')">
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.size + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('ad_id')" prop="id" align="center" />

          <el-table-column :label="$t('image')" align="center" width="360">
            <template slot-scope="{ row }">
              <video
                v-if="
                  row.imgUrl &&
                    row.imgUrl.slice(row.imgUrl.length - 4) == '.mp4'
                "
                :src="row.imgUrl"
                controls="controls"
                class="list-video"
              />
              <img
                v-else
                :src="row.imgUrl"
                :class="{
                  'list-video': listQuery.tabId == 1,
                  'pop-up': listQuery.tabId == 2
                }"
                class="cover-img"
                alt=""
              />
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('ad_title')"
            prop="title"
            align="center"
            width="200"
          />

          <el-table-column :label="$t('language')" prop="lang" align="center">
            <template slot-scope="{ row }">
              <span>
                {{
                  row.lang
                    .replace('中文', $t('chinese'))
                    .replace('英文', $t('english'))
                    .replace('柬文', $t('khmer'))
                }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('jump')"
            prop=""
            align="center"
            width="200"
          >
            <template slot-scope="{ row }">
              <span>
                {{ $t('jumping_method') }}：{{
                  row.openMethod
                  .replace('从app内打开', $t('open_from_within_the_app'))
                  .replace('跳转到浏览器', $t('jump_to_browser'))
                  .replace('不能跳转', $t('cannot_jump'))
                }}
              </span>

              <br />
              <span>
                {{ $t('jump_to_location') }}：{{ row | jumpPage(language) }}
              </span>
            </template>
          </el-table-column>

          <el-table-column :label="$t('status')" align="center">
            <template slot-scope="{ row }">
              <el-tag v-if="row.status == '已停用'" type="warning">
                {{ $t('deactivated') }}</el-tag
              >
              <el-tag v-if="row.status == '已删除'" type="info">
                {{ $t('deleted') }}</el-tag
              >
              <el-tag v-if="row.status == '上线中'" type="success">
                {{ $t('online') }}</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('total_exposure')"
            prop="showCount"
            align="center"
          />

          <el-table-column
            :label="$t('total_clicks')"
            prop="clickCount"
            align="center"
          />

          <el-table-column
            :label="$t('last_operator')"
            prop="updateByName"
            align="center"
          />

          <el-table-column
            :label="$t('data_breakdown')"
            align="center"
            width="190"
          >
            <template slot-scope="{ row }">
              <el-button size="mini" type="primary" @click="goDetails(row)">
                {{ $t('view_details') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="total > 0" class="p-t-15 fr">
          <el-pagination
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 40]"
            :page-size="listQuery.size"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="val => handlePageChange(val, 'size')"
            @current-change="val => handlePageChange(val, 'page')"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAdListApi } from '@/api/advertisement/advertisementClick.js';
import { dateShortcutKeyJS } from '@/mixins/index.js';

export default {
  name: 'AdRecords',
  mixins: [dateShortcutKeyJS],
  data() {
    return {
      listLoading: false,
      btnLoading: false,
      listData: [1],
      total: 1,
      listQuery: {
        adId: null,
        tabId: '1', // 1-闪屏，2-弹窗，3-Banner，4-推广，5-热门活动
        title: null,
        lang: null,
        status: null,
        updateByName: null,
        page: 1,
        size: 10
      },
      isCache: false,
      lan: 'zh'
    };
  },

  watch: {
    // 从用户详情页返回需要缓存页面
    $route(to, from) {
      if (
        to.name == 'internalAdvertisingRecords' &&
        from.name == 'advertisingDetails'
      ) {
        this.isCache = true;
      } else {
        this.isCache = false;
      }
    }
  },

  computed: {
    language() {
      return this.$store.state.app.language;
    }
  },

  created() {
    this.getList();
  },

  activated() {
    if (!this.isCache) {
      this.listQuery = {
        adId: null,
        tabId: '1',
        title: null,
        lang: null,
        status: null,
        updateByName: null,
        page: 1,
        size: 10
      };
      this.getList();
    }
  },

  methods: {
    async getList() {
      try {
        this.listLoading = true;
        const { code, data } = await getAdListApi(this.listQuery);
        this.listLoading = false;
        if (code == 200) {
          this.listData = data.result || [];
          this.total = Number(data.count) || 0;
        }
      } catch (e) {
        this.listLoading = false;
      }
    },

    search() {
      this.listQuery.page = 1;
      this.getList();
    },

    switchTab(val) {
      this.listQuery.tabId = val;
      this.listQuery.page = 1;
      this.getList();
    },

    handlePageChange(val, name) {
      this.listQuery[name] = val;
      this.getList();
    },

    goDetails(row) {
      const { id: adId } = row;
      this.$router.push({
        path: '/internalAdvertisingRecords/advertisingDetails',
        query: {
          adId,
          adType: this.listQuery.tabId
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.cover-img {
  width: 347px;
  min-height: 64px;
  object-fit: cover;
}

.list-video {
  width: 100px;
  height: 210px;
  object-fit: cover;
  margin: 0 auto;
}

.pop-up {
  width: 180px;
  min-height: 150px;
  object-fit: cover;
  margin: 0 auto;
}
</style>
